<template>
  <div class="page-content padding-top">
    <mt-index-list>
      <mt-index-section :index="item.initial" v-for="item in arr" style="margin-right: 26px;">
        <item class="item-icon-left" v-for="brandItem in item.brandInfo" @click.native="selectItem(brandItem.brandId,brandItem.brandName)">
          <i class="brand-logo" :style="'background-image:url('+brandItem.brandLogo+')'"></i>
          {{brandItem.brandName}}
        </item>
      </mt-index-section>
    </mt-index-list>
  </div>
</template>
<script>
  import { bus } from 'bus.js'
  import seriesModal from '../add/series.vue'

  export default {
    data() {
      return {
        seriesModal:null,
        arr:[],
        name:[],
        value:[],
        // index: null,
      }
    },
    mounted(){
      $modal.fromComponent(seriesModal, {
        title: '车系选择',
        theme: 'assertive',
        onHide: () => {
          // console.log();
        }
      }).then((modal) => {
        this.seriesModal = modal;
      });
    },
    destroyed(){
      if (this.seriesModal)
        $modal.destroy(this.seriesModal)
    },
    created(){
      var _this = this;
      axios.get(baseUrl+'/controller/getGroupBrand')
      .then(function(res){
        _this.arr = res.data.result;
      });
      bus.$on('modelId', (text) => {
        this.seriesModal.hide();
      });
    },
    methods: {
      selectItem(a,b){
        bus.$emit('brandId', a);
        bus.$emit('brandName', b);
        this.seriesModal.show();
      }
    }
  }
</script>
<style scoped>
  .brand-logo{
    position: absolute;
    width: 50px;
    height: 100%;
    background-size: 25px;
    background-position: 50% 50%;
    background-repeat: no-repeat; 
    display: inline-block;
    left: 0;
    top: 0;

  }
  .mint-indexlist-content{
    margin-right: 23px;
  }
</style>
